// 添加和编辑 大咖报告弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message,Spin,Cascader} from 'antd'
import { connect } from 'react-redux'
/* 引用接口文档路径 */
import {
  versionEdit,
  versionAdd,
} from 'actions/admin'//获取接口方法

const FormItem = Form.Item

@Form.create({
    mapPropsToFields(props) {
      return {
        versionCode: Form.createFormField({
          ...props.content,
          value: props.content.versionCode,
        }),
        downloadUrl: Form.createFormField({
          ...props.content,
          value: props.content.downloadUrl,
        }),
        forceUpdate: Form.createFormField({
          ...props.content,
          value:props.content.forceUpdate,
        }),
        updated: Form.createFormField({
          ...props.content,
          value: props.content.update,
        }),
        versionExplain: Form.createFormField({
          ...props.content,
          value: props.content.versionExplain,
        }),
        appName: Form.createFormField({
          ...props.content,
          value: props.content.appName,
        }),
        mobile: Form.createFormField({
          ...props.content,
          value: props.content.mobile,
        }),
      };
    } 
})

@connect(
  (state, props) => ({
    config: state.config,
    userInfoList: state.userInfoList,
  })
)

export default class ModalAddVersionControl extends Component {
  
    constructor (props) {
      super(props)
      this.state = {
        publisherList:[],
        isCompulsoryRenewal:[
          {name:'否',value:0},
          {name:'是',value:1},
        ],
        isRenewal:[
          {name:'否',value:0},
          {name:'是',value:1},
        ],
        deviceName:[
          {name:'IOS',value:'IOS'},
          {name:'android',value:'android'},
        ]
      }
    }
    componentWillMount() {
    }
    addReportSubmit(callback,e){//新增和编辑确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                if(this.props.type == 1){
                  var datajson = {
                      "versionCode":values.versionCode,//
                      "downloadUrl":values.downloadUrl,//
                      "forceUpdate":values.forceUpdate,//
                      "updated":values.updated,//
                      'versionExplain':values.versionExplain,//
                      "appName":values.appName,//
                      "mobile":values.mobile,//
                  }
                  //新增              
                  this.props.dispatch(versionAdd(
                  datajson,
                  (respose) => {
                      callback&&callback()
                      message.success(respose.respMsg);
                      this.props.ModalCancel();
                  }))
                }else{
                    var datajson = {
                      "id":this.props.content.id,//内容ID
                      "versionCode":values.versionCode,//
                      "downloadUrl":values.downloadUrl,//
                      "forceUpdate":values.forceUpdate,//
                      "updated":values.updated,//
                      'versionExplain':values.versionExplain,//
                      "appName":values.appName,//
                      "mobile":values.mobile,//
                    }
                    //编辑
                    this.props.dispatch(versionEdit(
                    datajson,
                    (respose) => {
                        callback&&callback()
                        message.success(respose.respMsg);
                        this.props.ModalCancel();
                    })) 
                }                                
            }
        });       
    }
    
    render () {
        const { getFieldDecorator } = this.props.form;
        const content = this.props.content;
        const formItemLayout = {
          labelCol: {
            sm: { span: 3 },
          },
          wrapperCol: {
            sm: { span: 20 },
          },
        };
        return (
            <Modal
                width={"80%"}
                wrapClassName="vertical-center-modal"
                maskClosable={false}
                visible={this.props.ModalFlg}
                title={this.props.type == '1' ? "新增版本信息" : "编辑版本信息" }
                onCancel={this.props.ModalCancel}
                onOk={this.addReportSubmit.bind(this,this.props.callback)}
                destroyOnClose={true}
            >
            <div>
              <Form>
                <FormItem label="版本号" {...formItemLayout}>
                  {
                    getFieldDecorator('versionCode', {
                    rules: [{
                        required: true,message:"请输入关键字"
                      }],
                    })(
                      <Input placeholder="请输入关键字"  size="default" style={{ width: '180px' }} />
                    )
                  }                 
                </FormItem>
                <FormItem label="下载地址" {...formItemLayout}>
                  {
                    getFieldDecorator('downloadUrl', {
                    rules: [{
                        required: true,message:"请输入关键字"
                      }],
                    })(
                      <Input placeholder="请输入关键字"  size="default" style={{ width: '180px' }} />
                    )
                  }                
                </FormItem>
                <FormItem label="是否强制更新" {...formItemLayout}>
                  {
                    getFieldDecorator('forceUpdate', {
                    rules: [{
                        required: true,message:"请选择是否强制更新"
                      }],
                    })(
                      <Select placeholder="请选择是否强制更新"     style={{ width: 180 }} >
                        {
                          this.state.isCompulsoryRenewal.map((item,i)=> {
                            return(
                              <Select.Option value={item.value} key={i}>{item.name}</Select.Option>
                            )
                          })
                        }
                      </Select> 
                    )
                  }             
                </FormItem>
                <FormItem label="是否更新" {...formItemLayout}>
                  {
                    getFieldDecorator('updated', {
                    rules: [{
                        required: true,message:"请选择强制更新"
                      }],
                    })(
                      <Select placeholder="请选择强制更新"     style={{ width: 180 }} >
                        {
                          this.state.isRenewal.map((item,i)=> {
                            return(
                              <Select.Option value={item.value} key={i}>{item.name}</Select.Option>
                            )
                          })
                        }
                      </Select> 
                    )
                  }             
                </FormItem>
                <FormItem label="版本说明" {...formItemLayout}>
                  {
                    getFieldDecorator('versionExplain', {
                    rules: [{
                        required: true,message:"请输入关键字"
                      }],
                    })(
                      <Input placeholder="请输入关键字"  size="default" style={{ width: '180px' }} />
                    )
                  }                
                </FormItem>
                <FormItem label="设备名称" {...formItemLayout}>
                  {
                    getFieldDecorator('appName', {
                    rules: [{
                        required: true,message:"请选择设备"
                      }],
                    })(
                      <Select placeholder="请选择设备"    style={{ width: 180 }} >
                        {
                          this.state.deviceName.map((item,i)=> {
                            return(
                              <Select.Option value={item.value} key={i}>{item.name}</Select.Option>
                            )
                          })
                        }
                      </Select> 
                    )
                  }             
                </FormItem>
                <FormItem label="联系电话" {...formItemLayout}>
                  {
                    getFieldDecorator('mobile', {
                    rules: [{
                        required: true,message:"请输入关键字"
                      }],
                    })(
                      <Input placeholder="请输入关键字"  size="default" style={{ width: '180px' }} />
                    )
                  }                
                </FormItem>
              </Form>
            </div>
          </Modal>
        )
    }
}